<template>
  <div class="personal-container">
    <top-bar>
      <img src="../../../static/img/back.png" slot="left" alt="" v-on:click="back" v-show="!hideNavFooter">
      <p slot="title">{{title}}</p>
      <div slot="right" v-show="addnewMember">
        <p class="addMember" @click="addMember">添加</p>
      </div>
    </top-bar>
    <scroll ref="scroll" class="personal-scroll" :data="[]">
      <div>
        <div class="personal-box">
          <user-info :name="'wochaobo'">
            <img slot="userImg" src="../../../static/img/mypic.jpg">
          </user-info>
          <ul class="main_function">
            <li class="main_function_left">
              <router-link to="">
                <img src="../../../static/img/shopping_cart.png">
                <p>购物车</p>
              </router-link>
            </li>
            <li class="main_function_right">
              <router-link to="">
                <img src="../../../static/img/my_order.png">
                <p>我的订单</p>
              </router-link>
            </li>
          </ul>

          <div class="msg_list">
            <ul>
              <li class="msg_list_container">
                <router-link to="/personal/mydoctor" class="msg_list_item">
                  <span class="left_img"><img src="../../../static/img/doctor.png"/></span>
                  <div class="middle_content">
                    <p class="content">我关注的医生</p>
                    <img class="right_arrow" src="../../../static/img/hole_forward.png"/>
                  </div>
                </router-link>
              </li>
              <li class="msg_list_container">
                <router-link to="/personal/familyMembers" class="msg_list_item">
                  <span class="left_img"><img src="../../../static/img/family.png"/></span>
                  <div class="middle_content">
                    <p class="content">我的家人</p>
                    <img class="right_arrow" src="../../../static/img/hole_forward.png"/>
                  </div>
                </router-link>
              </li>
            </ul>
          </div>

          <div class="msg_list">
            <ul>
              <li class="msg_list_container">
                <router-link to="/location" class="msg_list_item">
                  <span class="left_img"><img src="../../../static/img/address.png"/></span>
                  <div class="middle_content">
                    <p class="content">收货地址</p>
                    <img class="right_arrow" src="../../../static/img/hole_forward.png"/>
                  </div>
                </router-link>
              </li>
              <li class="msg_list_container">
                <router-link to="/personal/setting" class="msg_list_item">
                  <span class="left_img"><img src="../../../static/img/setting.png"/></span>
                  <div class="middle_content">
                    <p class="content">设置</p>
                    <img class="right_arrow" src="../../../static/img/hole_forward.png"/>
                  </div>
                </router-link>
              </li>
              <li class="msg_list_container">
                <router-link to="" class="msg_list_item">
                  <span class="left_img"><img src="../../../static/img/help.png"/></span>
                  <div class="middle_content">
                    <p class="content">帮助</p>
                    <img class="right_arrow" src="../../../static/img/hole_forward.png"/>
                  </div>
                </router-link>
              </li>
              <li class="msg_list_container">
                <router-link to="" class="msg_list_item">
                  <span class="left_img"><img src="../../../static/img/asking.png"/></span>
                  <div class="middle_content">
                    <p class="content">意见反馈</p>
                    <img class="right_arrow" src="../../../static/img/hole_forward.png"/>
                  </div>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
        <transition name="slide">
          <router-view></router-view>
        </transition>
      </div>
    </scroll>
    <nav-footer :currentIndex="3" v-show="hideNavFooter"></nav-footer>
  </div>
</template>

<script>
  import UserInfo from "../../components/userInfo/userInfo";
  import TopBar from "../../components/top-bar/top-bar";
  import NavFooter from "../../components/footer/navFooter";
  import Scroll from "../../components/scroll/scroll";
  import {mapMutations, mapGetters} from 'vuex'

    export default {
      name: "personal",
      data () {
        return {
          userInfo: {},
          hideNavFooter: true
        }
      },
      mounted () {

      },
      methods: {
        setPersonTitle () {
          this.setTitle('我的')
          this.setAddNewMember(false)
        },
        isSetting () {
          let path = this.$route.path
          if (path === '/personal') {
            this.setPersonTitle()
            this.hideNavFooter = true
          } else if (path === '/personal/setting'){
            this.hideNavFooter = false
            this.setTitle('设置')
            this.setAddNewMember(false)
          } else if (path === '/personal/familyMembers') {
            this.hideNavFooter = false
          } else if(path === '/personal/mydoctor') {
            this.hideNavFooter = false
          }
        },
        back () {
          this.$router.go(-1)
        },
        addMember () {
          this.setshow(true)
          this.$router.push('/personal/familyMembers/add')
        },
        ...mapMutations({
          setTitle: 'SET_TITLE',
          setAddNewMember: 'SET_ADD_NEW_MEMBER',
          setshow: 'SET_ADD_SHOW'
        })
      },
      computed: {
        ...mapGetters([
          'title',
          'addnewMember'
        ])
      },
      watch: {
        "$route": "isSetting"
      },
      components: {
        Scroll,
        NavFooter,
        TopBar,
        UserInfo,
      }
    }
</script>

<style scoped lang="scss">
  @import "../../common/sass/mixin";
  .personal-container{
    width: 100%;
    background-color: #F5F5F5;
    height: 100vh;
    text-align: center;
    position: relative;
    .personal-scroll{
      height: 99vh;
      overflow: hidden;
      .personal-box{
        min-height: 100vh;
        padding-top: 90px;/*rem*/
        .main_function{
          display: flex;
          background: rgba(95, 139, 247,1);
          align-items: center;
          padding: 22px 34px;/*rem*/
          font-size: 0;
          li{
            flex: 1;
            a{
              img{
                width: 48px;/*rem*/
                height: 48px;/*rem*/
              }
              p{
                margin-top: 18px;/*rem*/
                @include font-dpr(24px);
                color: #fff;
              }
            }
            &:first-child{
              border-right: 1px solid rgba(245, 245, 245, 0.2);
            }
          }
        }
        .msg_list{
          background-color: #fff;
          margin-top: 20px;/*rem*/
          .msg_list_container{
            padding-left: 34px;/*rem*/
            .msg_list_item{
              display: flex;
              align-items: center;
              .left_img{
                font-size: 0;
                height: 40px;/*rem*/
                width: 40px;/*rem*/
                margin-right: 38px;/*rem*/
                img{
                  height: 100%;
                  width: 100%;
                }
              }
              .middle_content{
                flex: 1;
                display: flex;
                border-bottom: 1px solid #f0f0f0;
                padding: 20px 18px 20px 0;/*rem*/
                align-items: center;
                .content{
                  flex: 1;
                  text-align: left;
                  @include font-dpr(24px);
                  color: #333;
                }
                .right_arrow{
                  height: 20px;/*rem*/
                  width: 12px;/*rem*/
                }
              }
            }
          }
        }
      }
    }
  }
  /*#user-info{*/
    /*padding-top: 12px;*/
    /*margin-top: 4px;*/
    /*text-align: left;*/
  /*}*/
  /*#userName{*/
    /*margin-top: 5px;*/
    /*font-size: 15px;*/
    /*color: #323133;*/
  /*}*/
  /*#userTag{*/
    /*margin-top: 2px;*/
    /*font-size: 12px;*/
    /*color: #7D7A7F;*/
  /*}*/


  /*.feed-back{*/
    /*display: flex;*/
    /*flex-flow: row nowrap;*/
    /*justify-content: space-between;*/
    /*align-items: center;*/
    /*margin-top: 16px;*/
    /*height: 44px;*/
    /*padding-left: 12px;*/
    /*padding-right: 12px;*/
    /*background-color: white;*/
  /*}*/
  /*.feed-back p{*/
    /*font-size: 15px;*/
    /*color: #313033;*/
    /*line-height: 22px;*/
  /*}*/

  .slide-enter-active, .slide-leave-active {
    transition: all 0.3s;
  }
  .slide-enter, .slide-leave-to {
    transform: translate3d(100%, 0, 0);
  }
</style>
